<!-- 销售订单记录 -->
<template>
  <div class="pagePadding">
    <Form inline class="formMarginBtm20 clearfix">
      <!-- 销售单号 -->
      <FormItem>
        <span>销售单号：</span>
        <Select placeholder="请选择" v-model="queryFrom.order_code" clearable filterable class="iviewIptWidth250">
          <Option v-for="(item, index) in saleOrderList" :value="item.order_code" :key="index">{{ item.order_code }}</Option>
        </Select>
      </FormItem>
      <!-- 客户名称 -->
      <FormItem class="marginLeft40">
        <span>客户名称：</span>
        <Select placeholder="请选择" v-model="queryFrom.customer_id" clearable filterable class="iviewIptWidth250">
          <Option v-for="(item, index) in customerList" :value="item.customer_id" :key="index">{{ item.customer_name }}</Option>
        </Select>
      </FormItem>
      <!-- 下单时间 -->
      <FormItem class="marginLeft40">
        <span>下单时间：</span>
        <DatePicker type="daterange" placeholder="请选择" format="yyyy-MM-dd" class="iviewIptWidth250" @on-change="changeTime"></DatePicker>
      </FormItem>
      <!-- 订单类型 -->
      <FormItem class="marginLeft40">
        <span>订单类型：</span>
        <Select placeholder="请选择" v-model="queryFrom.order_type" clearable filterable class="iviewIptWidth250">
          <Option v-for="(item, index) in orderType" :value="item.id" :key="index">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <!-- 按钮 -->
      <FormItem class="po-create-number marginRight0" :label-width="20">
        <span class="pageBtn finger btnSure" @click="query">查询</span>
        <span class="longTextBtn finger btnAdd marginLeft20">合并导出</span>
      </FormItem>
    </Form>
    <Table :productList="listColumns" :productData="listData" :total="total" :pages="queryFrom" @change-page="changePage" totalText="条记录">
      <div slot="summary" class="summary" v-if="listData && listData.length > 0">
        合计金额：<span class="color389">¥{{ total_price }}</span>
      </div>
    </Table>
  </div>
</template>

<script>
import Table from '@/components/table'

export default {
  name: 'salesOrderRecord',
  components: {
    Table,
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 合计金额
      total_price: 0,
      // 表格数据
      listData: [],
      // 表格头部标题
      listColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 55,
        },
        {
          title: '订单号',
          key: 'order_code',
          align: 'center',
        },
        {
          title: '客户名称',
          key: 'customer_name',
          align: 'center',
        },
        {
          title: '订单金额',
          align: 'center',
          render: (h, param) => {
            return h('span', '¥' + param.row.order_price)
          },
        },
        {
          title: '下单时间',
          key: 'order_time',
          align: 'center',
        },
        {
          title: '订单类型',
          key: 'order_type',
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          width: 180,
          render: (h, param) => {
            return h('div', [
              h(
                'span',
                {
                  style: {
                    color: '#389AFC',
                    fontSize: '14px',
                    cursor: 'pointer',
                  },
                  on: {
                    click: () => {
                      this.details(param.row)
                    },
                  },
                },
                '详情'
              ),
              h(
                'span',
                {
                  style: {
                    color: '#389AFC',
                    fontSize: '14px',
                    cursor: 'pointer',
                    marginLeft: '40px',
                  },
                  on: {
                    click: () => {
                      // this.details(param.row)
                    },
                  },
                },
                '导出'
              ),
            ])
          },
        },
      ],
      // 订单类型下拉
      orderType: [
        {id: '1', name: '普通销售'},
        {id: '2', name: '自寄售'},
        {id: '3', name: '供方寄售'},
        {id: '4', name: '委托代销'},
      ],
      // 客户下拉
      customerList: [],
      // 销售单号下拉
      saleOrderList: [],
      // 查询参数
      queryFrom: {
        page: 1,
        rows: 10,
        order_code: '',
        customer_id: '',
        order_time_begin: '',
        order_time_end: '',
        order_type: ''
      },
    }
  },
  mounted() {
    this.queryList()
    this.getSaleOrderList()
    this.getCustomerList()
  },
  methods: {
    // 时间改变
    changeTime(e) {
      this.queryFrom.order_time_begin = e[0]
      this.queryFrom.order_time_end = e[1]
    },
    // 客户名称下拉
    getCustomerList() {
      this.$http.get(this.$api.customerList).then(res => {
        this.customerList = res.data
      })
    },
    // 销售单号下拉
    getSaleOrderList() {
      this.$http.get(this.$api.saleOrder, {page: 1, rows: 100}).then(res => {
        this.saleOrderList = res.data
      })
    },
    // 点击查询按钮
    query() {
      this.queryFrom.page = 1
      this.queryList()
    },
    // 分页改变
    changePage(e) {
      this.queryFrom.page = e
      this.queryList()
    },
    // 查询列表数据
    queryList() {
      this.$http.get(this.$api.saleOrder, this.queryFrom, true).then(res => {
        this.listData = res.data
        this.listData.forEach(item => {
          item.order_time = item.order_time ? this.$moment(item.order_time * 1000).format('YYYY-MM-DD') : ''
        })
        this.total_price = res.total_price
        this.total = res.total
      })
    },
    // 详情
    details(row) {
      this.$router.push({
        path: '/detailsSalesOrderRecord',
        query: {
          order_code: row.order_code
        }
      })
    },
  },
}
</script>

<style scoped lang="less"></style>
